<template>
	<view class="container" v-if="info != null">
		<view class="bannder rela">
			<view class="flex j-between a-center">
				<view class="flex col j-center a-center">
					<view class="num">{{info.point}}</view>
					<view class="name">我的金币</view>
				</view>
				<u-line length="32" color="#fff" direction="col"></u-line>
				<view class="flex col j-center a-center">
					<view class="num">{{info.frozen_point}}</view>
					<view class="name">冻结金币</view>
				</view>
			</view>
			<view class="abso mx flex j-between a-center">
				<view class="flex col j-center a-center">
					<view class="num">{{info.point_count}}</view>
					<view class="name">金币收益</view>
				</view>
				<view class="flex col j-center a-center">
					<view class="num">{{info.point_congzhi}}</view>
					<view class="name">金币充值</view>
				</view>
				<view class="flex col j-center a-center">
					<view class="num">{{info.point_tixian}}</view>
					<view class="name">金币提现</view>
				</view>
			</view>
		</view>
		<!--<view class="list" v-for="n,i in list" :key="i">
			<view class="month">{{n.time}}</view>-->
			<view class="panel">
				<view v-for="item,idx in list" :key="idx">
					<view class="item flex j-between a-center">
						<view class="flex col">
							<view class="name">{{ getType(item.action)}}</view>
							<view class="desc">{{ $util.dateFormat('mm月dd日',item.create_time*1000)}}</view>
						</view>
						<view class="flex col a-end">
							<view class="name" :class="{'add':item.point > 0}">{{item.point > 0 ? '+':''}}{{item.point}}</view>
							<view class="desc">{{item.description}}</view>
						</view>
					</view>
					<view class="split" v-if="idx < list.length - 1">
						<u-line length="654" color="#F2F2F2"></u-line>
					</view>
				</view>
			</view>
		<!--</view>-->
	</view>
</template>

<script>
export default{
	data(){
		return{
			info:null,
			//list:[
			//	{time:'2021年9月',list:[{name:'提现',time:'9月20日',coin:-1000,msg:'金币结余1000个'},
			//	{name:'发布任务',time:'9月19日',coin:-1000,msg:'金币结余1000个'},
			//	{name:'充值',time:'9月18日',coin:1000,msg:'金币结余1000个'},
			//	{name:'完成任务',time:'9月17日',coin:1000,msg:'金币结余1000个'}]},
			//	{time:'2021年9月',list:[{name:'提现',time:'9月20日',coin:-1000,msg:'金币结余1000个'},
			//	{name:'发布任务',time:'9月19日',coin:-1000,msg:'金币结余1000个'},
			//	{name:'充值',time:'9月18日',coin:1000,msg:'金币结余1000个'},
			//	{name:'完成任务',time:'9月17日',coin:1000,msg:'金币结余1000个'}]}
			//]
			list:[]
		}
	},
	onLoad() {
		this.$api.info().then(res => {
			this.info = res.data
			this.getCoinloglist()
		})
	},
	methods:{
		getCoinloglist(){
			this.$api.getCoinloglist().then(res => {
				this.list = res.data.list
			})
		},
		getType(type){
			//1购买金币2发布任务3获得奖励4购物消耗5金币提现6金币冻结7置顶消耗
			return type == 1 ? '购买金币':
				   type == 2 ? '发布任务':
				   type == 3 ? '获得奖励':
				   type == 4 ? '购物消耗':
				   type == 5 ? '金币提现':
				   type == 6 ? '金币冻结': '置顶消耗'
		}
	}
}
</script>

<style lang="scss" scoped>
.container{padding: 0 24rpx;}
.bannder{background: linear-gradient(226deg, #428BF7 0%, #246FDD 100%);overflow: hidden;height: 364rpx;
	box-shadow: 0px 12rpx 12rpx rgba(36, 111, 221, 0.16);border-radius: 16rpx;padding: 48rpx 140rpx;
	margin-top: 18rpx;color: #FFF;
	.num{font-size: 36rpx;font-weight: bold;}
	.name{font-size: 24rpx;margin-top: 24rpx;}
	.mx{height: 164rpx;left: 0;right:0;bottom: 0;background: rgba(255, 255, 255, .1);padding: 32rpx 70rpx;}
}
.list{color: #333;
	.month{font-size: 28rpx;margin: 32rpx 0;}
}
	.panel{background-color: #fff;border-radius: 16rpx;padding: 32rpx 24rpx;margin-top: 32rpx;
		.split{margin: 32rpx 0;}
		.name{font-size: 32rpx;font-weight: bold;color: #333;}
		.desc{color: #999;font-size: 24rpx;margin-top: 16rpx;}
		.add{color: #00D86A;}
	}
</style>
